<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 绝对定位会让元素脱离文档流 */
      /* 

      position: static 没有定位
      position: relative 相对定位(相对于自身当前位置移动所设置的距离)
      position: absolute 绝对定位(根据已定位的父元素来决定位置)
      position: fixed 固定定位
      position: stickt 粘性定位
      z-index: 堆叠顺序权重比(在父子元素上是无效的)

      top | bottom | left | right
    */
      .box {
        width: 150px;
        height: 150px;
        border: 2px solid #aaa;
        background: #ddd;
        position: relative;
        /* 10%父元素百分比 */
        top: 0;
        /* 10%父元素百分比 */
        left: 0;
      }
      .box2 {
        width: 150px;
        height: 150px;
        border: 2px solid #aaa;
        background: red;
        position: absolute;
        /* 10%父元素百分比 */
        top: 0;
        /* 10%父元素百分比 */
        left: 0;
        z-index: 0;
      }
      .box3 {
        width: 150px;
        height: 150px;
        border: 2px solid #aaa;
        background: blue;
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 100;
      }
      .box3-child {
        width: 50px;
        height: 50px;
        border: 2px solid #aaa;
        background: blueviolet;
        position: absolute;
        /* 10%父元素百分比 */
        top: 10px;
        /* 10%父元素百分比 */
        left: 10px;
        z-index: 10;
      }
      .box4 {
        width: 100px;
        height: 100px;
        border: 2px solid #aaa;
        background: orange;
        position: fixed;
        /* 10%父元素百分比 */
        top: 10px;
        /* 10%父元素百分比 */
        right: 0;
      }
      .box5 {
        width: 100px;
        height: 100px;
        border: 2px solid #aaa;
        background: pink;
        position: sticky;
        /* 10%父元素百分比 */
        top: 0;
        /* 10%父元素百分比 */
        left: 300px;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box"></div> -->
    <div class="box2"></div>
    <div class="box3">
      <div class="box3-child"></div>
    </div>
    <div class="box4"></div>
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit numquam at
      ab? Ratione nostrum ad nesciunt, quibusdam excepturi magnam enim odit
      aspernatur, eum accusamus eaque, assumenda provident incidunt dolores
      minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit
      numquam at ab? Ratione nostrum ad nesciunt, quibusdam excepturi magnam
      enim odit aspernatur, eum accusamus eaque, assumenda provident incidunt
      dolores minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Velit numquam at ab? Ratione nostrum ad nesciunt, quibusdam excepturi
      magnam enim odit aspernatur, eum accusamus eaque, assumenda provident
      incidunt dolores minus?
     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit numquam at
      ab? Ratione nostrum ad nesciunt, quibusdam excepturi magnam enim odit
      aspernatur, eum accusamus eaque, assumenda provident incidunt dolores
      minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Velit
      numquam at ab? Ratione nostrum ad nesciunt, quibusdam excepturi magnam
      enim odit aspernatur, eum accusamus eaque, assumenda provident incidunt
      dolores minus? Lorem ipsum, dolor sit amet consectetur adipisicing elit.
      Velit numquam at ab? Ratione nostrum ad nesciunt, quibusdam excepturi
      magnam enim odit aspernatur, eum accusamus eaque, assumenda provident
      incidunt dolores minus?
    <div class="box5"></div>
  </body>
</html>
